/**
 * create by caijy 2019/5/7
 */
define(["echarts"], function (echarts) {
    var doc = document;
    var app = win.app, self, pageParameters


    app.newModule({

        init: function () {
            self = this;

            self._super({
                _readyBefore: function () {
                    self.data = {
                        list: [],
                        names: [],
                        percents: [],
                        startDate: '',
                        endDate: ''

                    }
                }
            }, win);// 放在后边

        },
        getInfo: function () {
            self.data.names = [];
            self.data.percents = [];
            app.ajax({
                xurl: 'api/wx/bfcgl/getInfo',
                loading: true,
                xdata: {
                    startDate: self.data.startDate,
                    endDate: self.data.endDate
                },
                cb: function (res) {
                    if (res.ok) {
                        var data = res.data.data;
                        data.sortByKey('percent', true);
                        self.data.list = data;
                        self.formChat(data)
                    }
                }
            })
        },
        formChat: function (data) {

            for (var item of data) {
                self.data.names.push(item.NAME);
                self.data.percents.push(item.percent)
            }
            var chartDiv = echarts.init(doc.getElementById('divChart'));

            var getOption = function () {
                var chartOption = {
                    legend: {
                        data: self.data.names
                    },
                    grid: {
                        x: 35,
                        x2: 10,
                        y: 30,
                        y2: 25
                    },
                    // 提示框组件
                    tooltip: {
                        trigger: 'axis', // 触发类型。坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用/none什么都不触发
                    },
                    toolbox: {
                        show: false,
                        feature: {
                            mark: {
                                show: true
                            },
                            dataView: {
                                show: true,
                                readOnly: false
                            },
                            magicType: {
                                show: true,
                                type: ['line']
                            },
                            restore: {
                                show: true
                            },
                            saveAsImage: {
                                show: true
                            }
                        }
                    },
                    calculable: false,
                    xAxis: [{
                        type: 'category',
                        data: self.data.names
                    }],
                    yAxis: [{
                        type: 'value',
                        axisLabel: {
                            formatter: '{value}%'
                        },
                        splitArea: {
                            show: true
                        }
                    }],
                    series: [{
                        name: '百分比',
                        type: 'line',
                        data: self.data.percents,
                        label: {
                            normal: {
                                formatter: function (a) {
                                    return a.data + '%';
                                },
                                show: true,
                            }
                        },
                    }]
                };
                return chartOption;
            };
            chartDiv.setOption(getOption())
        },
        _ready: function () {
            var month = new Date().getCurrentMonth();
            self.data.startDate = month[0];//本月开始日期
            self.data.endDate = new Date().Format('yyyy-MM-dd');
            new Vue({
                el: doc.querySelector('.mui-content'),
                data: self.data,
                watch: {
                    'startDate': function (res) {
                        self.data.startDate = res;
                        self.getInfo();
                    },
                    'endDate': function (res) {
                        self.data.endDate = res;
                        self.getInfo();
                    }
                },
                methods: {}
            });

            self.getInfo();

        },
        _lazy: function () {
            this._super();

            mui('.mui-scroll-wrapper').scroll({
                deceleration: 0.0005
            });
        }
    });

});

